import React, { Suspense } from 'react';
import { useRoutes } from 'react-router-dom'
const Home = React.lazy(() => import('../views/home'))
const ListManage = React.lazy(() => import('../views/listManage'))
const ListAdd = React.lazy(() => import('../views/listAdd'))
const Login = React.lazy(() => import('../views/login'))
const MainLayout = React.lazy(() => import('../components/mainLayout'))

export const routes_list = [{
  path: '/',
  element: <MainLayout>
    <Home></Home>
  </MainLayout>,
  meta: {
    title: '首页',
  }
}, {
  path: '/list',
  meta: {
    title: '列表操作'
  },
  children: [{
    path: '/list/add',
    element: <MainLayout>
      <ListAdd></ListAdd>
    </MainLayout>,
    meta: {
      title: '列表添加',
    }
  }, {
    path: '/list/Manage',
    element: <MainLayout>
      <ListManage></ListManage>
    </MainLayout>,
    meta: {
      title: '列表管理',
    }
  }]
}, {
  path: '/login',
  element: <Login></Login>,
  meta: {
    title: '登录',
    hidden: true
  }
},
{
  path: '/set',
  element: <div>设置</div>,
  meta: {
    title: '设置',
    role: 'admin'
  }
}]
const RouterView = () => {
  const userInfo = JSON.parse(localStorage.getItem('userInfo') || "{}")
  // 6、正确完成动态路由逻辑的封装
  const promissRoutes = routes_list.filter((v) => {
    if (v.meta.role) {
      return userInfo.role === v.meta.role
    } else {
      return true
    }
  })
  return useRoutes(promissRoutes)
}
const Router = () => {
  // 3、正确实现白屏优化、考虑弱网情况
  return <Suspense fallback="路由加载中...">
    <RouterView></RouterView>
  </Suspense>
}

export default Router

